<template>
    <u-navbar left-icon="" bg-color="#fff" placeholder :fixed="false">
      <template #center>
        <view class="w-full flex items-center px-24rpx">
          <view class="search-input">
            <up-input
              :custom-style="inputCustomStyle"
              shape="circle"
              placeholder="搜职位/公司"
              :prefix-icon="search"
              border="none"
              font-size="24rpx"
              clearable
            >
              <template #suffix>
                <up-button :custom-style="btnCustomStyle" shape="circle">
                  <text class="text-24rpx">
                    搜索
                  </text>
                </up-button>
              </template>
            </up-input>
          </view>
        </view>
      </template>
    </u-navbar>
  </template>

  <script setup lang="ts">
  // import search from '@/static/images/tab/home-03.png';
  import { usePageRouter } from '@/hooks';
  const search = 'https://yiliao.test03.qcw800.com/static/images/tab/home-03.png'
  const inputCustomStyle = {
    background: '#f6f6f6',
    color: '#4e5969',
    width: 'auto',
    height: '100%',
    fontSize: '24rpx',
    padding: '6rpx',
    paddingLeft: '20rpx',
  };
  const btnCustomStyle = {
    background: '#fff',
    color: '#4e5969',
    width: '108rpx',
    height: '54rpx',
    fontSize: '24rpx',
    marginRight: 0,
    padding: '6rpx',
    border: 'none',
  };

  const pageRouter = usePageRouter();
  const back = () => {
    pageRouter.back();
  };
  </script>

  <style scoped lang="scss">
  .search-input {
    width: 432rpx;
    height: 66rpx;
  }
  </style>
